<template>
  <div>
    <div class="c-pt20 c-fs24 c-ph24" v-if="!(description && (description.length==0||(description.length==1&&description[0].content=='')))" :class="!showDesc&&!isShowTheme?'c-text-hidden c-maxh180':''">
      <div ref="text" id="text">
        <div v-for="(item, index) in description" :key="index">
          <div
            v-if="item.type == 1"
            @click="clickDescHtml"
            class="tinymce-text c-ww-ba c-contexty-scroll"
            :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
            v-html="item.content"
          ></div>
          <div v-else-if="item.type == 3" class="c-pt20 tinyMusic c-p">
            <aplayer preload="auto" :music="{
              artist:' ',
              title: item.title,
              src:isiOS ? item.audioM3u8 : item.audioM4a,
              pic:require('@/assets/i/wap/clockIn/audio_cover_d.png'),
            }" :volume="1" repeat="repeat-one" :isAplayerShow="isAplayerShow" @play="playAplayer"/>
            <div v-if="showAudioRecordModal" class="musciAlet"></div>
          </div>
          <div
            v-else-if="item.type == 2"
            class="c-p c-w100 c-flex-row c-flex-center c-text-hidden"
            @click="clickVideo(item.content, item.videoM3u8)"
          >
            <div v-if="item.videoCover" class="img-play-btn">
              <i class="iconfont c-fs80 c-fc-white">&#xe880;</i>
            </div>
            <img
              class="c-w100"
              :src="
                $addXossFilter(
                  item.videoCover,
                  'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png'
                )
              "
              alt=""
            />
          </div>
          <!-- 关联课程，直播，专栏 -->
          <div
            @click="clickDescriptionItem(item)"
            v-else
            class="c-mt20 c-hh120 c-bg-f6 c-ph10 c-pv10 c-flex-row c-aligni-center"
          >
            <img
              :src="$addXossFilter(item.content, require('../../../assets/defult270.png'))"
              class="c-ww150 c-hh100 c-br8"
              alt=""
            />
            <div class="c-ph20 c-pt10 c-flex-grow1 c-w0">
              <div class="c-fs24 c-text-ellipsis1">{{ item.title }}</div>
              <div class="c-fs22 c-pt32">
                {{ DESCTIPTION_TYPE_MAP[item.type] }}
              </div>
            </div>
            <i class="iconfont c-fs20 c-fc-gray">&#xe85a;</i>
          </div>
        </div>
      </div>
    </div>
    <div
      v-show="!showDesc&&isShowTheme==0&&nobtn"
      @click="clickDesc"
      class="c-flex-row c-flex-center c-pt20 c-pb10 c-fs22 theme-fc"
    >
      <span class="c-pr10">查看详情</span>
      <i class="iconfont c-lh">&#xe816;</i>
    </div>
    <div
      v-show="showDesc&&isShowTheme==0&&nobtn"
      @click="clickDesc"
      class="c-flex-row c-flex-center c-pt20 c-pb10 c-fs22 theme-fc"
    >
      <span class="c-pr10">收起详情</span>
      <i class="iconfont c-lh c-rotate180">&#xe816;</i>
    </div>

    <slot></slot>
  </div>
</template>

<script>
import VueAPlayer from "@/plugin/vue-aplayer/vue-aplayer.vue";
import { wxUtilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "ClockCourseDetailCom",
  components: {
    Aplayer: VueAPlayer
  },
  props: {
    status: {
      type: Number,
      default: 0
    },
    description: {
      type: Array,
      default: () => []
    },
    isShowTheme:{
      type: Number,
      default: 0
    },
    showAudioRecordModal: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isAplayerShow:false,
      isiOS: false,
      showDesc: false,
      nobtn:true,
      DESCTIPTION_TYPE_MAP: {
        9: "专栏",
        11: "测评",
        51: "直播",
        110: "视频",
        111: "音频",
        112: "图文"
      }
    };
  },

  computed: {

  },
  watch: {
    showAudioRecordModal(val) {
      if (val) {
         let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src) {
            arr[i].pause();
          }
        }
      }
    }
  },
  mounted() {
    this.isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    let that = this
    for (let item in this.description) {
      if (this.description[item].type == 2 || this.description[item].type == 3) {
        this.$nextTick(() => {
          that.nobtn = true
        })
        return
      } else if (this.description[item].type == 1) {
        if (this.description[item].content.search(/<img /i) >= 0) {
          that.nobtn = true
          return
        } else {
          this.$nextTick(() => {
            //获取当前内容的行高，超过3行则显示更多
            let queryTextContent = document.querySelectorAll("#text");
            if (!queryTextContent) {
              return;
            }
            that.showDesc = false;
            if (that.isShowTheme == 1) {
              that.showDesc = true;
            }
            if (that.$refs.text && that.$refs.text.offsetHeight <= 89) {
              that.nobtn = false
            } else {
              that.nobtn = true
            }
          })
        }
      } else {
        this.$nextTick(() => {
          that.nobtn = true
        })
      }
    }
  },
  methods: {
    playAplayer(src) {
      console.log(122222, this.showAudioRecordModal, typeof src)
      if (typeof src == 'string') {
        let arr = document.getElementsByTagName("video");
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].src !== src) {
            arr[i].pause();
          }
        }
      }
      if (this.showAudioRecordModal) {
        if (typeof src == 'string' || typeof src == "object") {
          let arr = document.getElementsByTagName("video");
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].src ) {
              arr[i].pause();
            }
          }
        }
      }
    },
    clickDescHtml(e) {
      if (this.showAudioRecordModal) {
        return
      }
      if (e.target.tagName == "IMG" && e.target.src) {
        let imgData = {
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src]
        }
        wxUtilJs.previewImage(imgData)
        // wxUtilJs.previewImage({
        //   current: e.target.src, // 当前显示图片的http链接
        //   urls: [e.target.src] // 需要预览的图片http链接列表
        // });
      }
    },
    //详情关联相关
    clickDescriptionItem(item) {
      if (this.showAudioRecordModal) {
        return
      }
      let prodType = item.type == 110 || item.type == 111 || item.type == 112 ? global.ckFrom.course : item.type;
      let courseType = item.type == 111 ? 1 : item.type == 112 ? 2 : 0;
      goDetails(this, prodType, item.objId, '', courseType);
    },
    clickDesc() {
      if (this.showDesc) {
        this.showDesc = false;
      } else {
        this.showDesc = true;
      }
      this.isAplayerShow = false
    },

    clickVideo(videoUrl, videoM3u8) {
      if (this.showAudioRecordModal) {
        return
      }
      this.$emit("clickShowVideo", videoUrl, videoM3u8);
    }
  },
  activated() {},
  deactivated() {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-play-btn {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.tinyMusic /deep/ .aplayer1 .aplayer-body .aplayer-info1{
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.musciAlet{
  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}
</style>
